import React, { Component } from 'react';
import { connect } from 'dva';
import {
  Form, Input, Button, Card, Tabs,
} from 'antd';
import ModifyPassword from './ModifyPassword';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;


@connect(state => ({
  submitting: state.form.regularFormSubmitting,
}))
@Form.create()
export default class AdminManagement extends Component {
  state={
    updateFlag: true,
  }
  callback = (key) => {
    console.log(key);
  }
  updateValue= () => {
    this.setState({
      updateFlag: false,
    });
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log(values);
        // this.props.dispatch({
        //   type: 'form/submitRegularForm',
        //   payload: values,
        // });
      }
    });
  }
  render() {
    const { submitting } = this.props;
    const { getFieldDecorator } = this.props.form;

    const admin = {
      id: '123123',
      role: '管理员',
      name: 'Rico',
      identity: '440888999999999999',
      phoneNumber: '1344151231',
      email: '123123@gmail.com',
      address: '深圳市南山区马家龙梨园新村三栋四座五零一',
      section: '美国白宫',
      duty: '金正恩统帅',
    };
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <Tabs defaultActiveKey="1" onChange={this.callback}>
        <TabPane tab="基本资料" key="1">
          <Card bordered>
            <Form
              onSubmit={this.handleSubmit}
              hideRequiredMark
              style={{ marginTop: 8 }}
            >
              <Card bordered>
                <FormItem
                  {...formItemLayout}
                  label="ID"
                >
                  {getFieldDecorator('id', {
                    rules: [{
                      required: true,
                    }],
                    initialValue: admin.id,
                  })(
                    <Input placeholder="ID" disabled={this.state.updateFlag} />
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="角色"
                >
                  {getFieldDecorator('role', {
                    rules: [{
                      required: true, message: '请输入角色',
                    }],
                    initialValue: admin.role,
                  })(
                    <Input placeholder="请输入角色" disabled={this.state.updateFlag} />
                  )}
                </FormItem>
              </Card>
              <Card bordered>
                <FormItem
                  {...formItemLayout}
                  label="姓名"
                >
                  {getFieldDecorator('name', {
                    rules: [{
                      required: true, message: '请输入名字',
                    }],
                    initialValue: admin.name,
                  })(
                    <Input placeholder="请输入名字" disabled={this.state.updateFlag} />
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="身份证"
                >
                  {getFieldDecorator('identity', {
                    rules: [{
                      required: true, message: '请输入身份证',
                    }],
                    initialValue: admin.identity,
                  })(
                    <Input placeholder="请输入身份证" disabled={this.state.updateFlag} />
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="手机号码"
                >
                  {getFieldDecorator('phoneNumber', {
                    rules: [{
                      required: true, message: '请输入手机号码',
                    }],
                    initialValue: admin.phoneNumber,
                  })(
                    <Input placeholder="请输入手机号码" disabled={this.state.updateFlag} />
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="邮箱"
                >
                  {getFieldDecorator('email', {
                    rules: [{
                      required: true, message: '请输入邮箱',
                    }],
                    initialValue: admin.email,
                  })(
                    <Input placeholder="请输入邮箱" disabled={this.state.updateFlag} />
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="地址"
                >
                  {getFieldDecorator('address', {
                    rules: [{
                      required: true, message: '请输入地址',
                    }],
                    initialValue: admin.address,
                  })(
                    <Input placeholder="请输入地址" disabled={this.state.updateFlag} />
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="部门"
                >
                  {getFieldDecorator('section', {
                    rules: [{
                      required: true, message: '请输入部门',
                    }],
                    initialValue: admin.section,
                  })(
                    <Input placeholder="请输入部门" disabled={this.state.updateFlag} />
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="职务"
                >
                  {getFieldDecorator('duty', {
                    rules: [{
                      required: true, message: '请输入职务',
                    }],
                    initialValue: admin.duty,
                  })(
                    <Input placeholder="请输入职务" disabled={this.state.updateFlag} />
                  )}
                </FormItem>
              </Card>
              <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
                <Button type="primary" htmlType="submit" loading={submitting} size="large">
                  提交
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.updateValue} size="large">修改</Button>
              </FormItem>
            </Form>
          </Card>
        </TabPane>
        <TabPane tab="修改密码" key="2">
          <ModifyPassword />
        </TabPane>
      </Tabs>
    );
  }
}
